<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Young's</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src='../js/jquery.wobblewindow.min.js'></script>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
    <link rel="stylesheet" media="screen" href="../particles/css/style.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/shake.css">
    <!--<link href="https://fonts.googleapis.com/css?family=Kalam:400,700" rel="stylesheet">-->
</head>
<script>
    $(document).ready(function () {
        var settings = {
            name: 'window_1',//name
            depth: 1,//深度为 zIndex
            offsetX: 0,//+ 或-值的 div 的大小
            offsetY: 0,//+ 或-值的 div 的大小
            moveTypeIn: 'move',//方法点跟随鼠标
            moveTypeOut: 'wobble',//方法点返回 init 位置
            wobbleFactor: 0.9,//控制摆动效果
            wobbleSpeed: 0.1,//控制摆动速度
            moveSpeed: 3,//控制移动速度
            lineWidth: 1,//线宽
            lineColor: '',//没有值 = 没有行或十六进制值
            bodyColor: 'rgba(99, 101, 104, 0.4)',//没有价值 = 没有身体颜色或十六进制值
            numberOfXPoints: 7,//水平点的数量。必须是一个奇数 int
            numberOfYPoints: 5,//点垂直的数量。必须是一个奇数 int
            movementLeft: true,//如果真的, 左边的点可以移动
            movementRight: true,//如果真的, 右边的点可以移动
            movementTop: true,//如果真的, 顶部的点可以移动
            movementBottom: true,//如果真的, 底部的点可以移
            debug: false//如果真的调试模式处于 on
    };
        //上下展开效果
        setTimeout(function(){
            $(".bg").animate({'height': '200px','top': '0px'}, 1500, function () {
                $(".main-content").fadeIn(800);
                fade();
                $(".my-content").wobbleWindow(settings);
            });
        }, 300);

    });
    function fade() {
        $(".bg").css("background-color","rgba(99, 101, 104, 0)");
    }
</script>
<body>

    <!-- count particles -->
    <div class="count-particles" style="display: none">
        <span class="js-count-particles">--</span> particles
    </div>
    <div class="my-content">
        <div class="bg"></div>
        <div class="main-content">
            <div class="header">
                <img class="shake shake-little" style="height: 150px" src="https://blog-1253126263.cos.ap-shanghai.myqcloud.com/young.png" alt="Young">
            </div>
            <div class="info">
                <div class="my-link">
                    <p><a href="http://blog.hayye.cn">Blog</a></p>
                    <p><a href="https://github.com/hayye">Github</a></p>
                    <p><a href="https://gitee.com/hayye">Gitee</a></p>
                </div>
                <div class="my-qrcode">
                    <img style="height: 150px" src="../image/qrcode/quan.png" alt="关注我的微信订阅号">
                </div>
            </div>
        </div>
    </div>

    <!-- particles.js container -->
    <div id="particles-js"></div>

    <!-- scripts -->
    <script src="../particles/particles.min.js"></script>
    <script src="../particles/js/app.js"></script>

    <!-- stats.js -->
    <script src="../particles/js/lib/stats.js"></script>
    <script>
        var count_particles, stats, update;
        stats = new Stats;
        stats.setMode(0);
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        document.body.appendChild(stats.domElement);
        count_particles = document.querySelector('.js-count-particles');
        update = function() {
            stats.begin();
            stats.end();
            if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
                count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
            }
            requestAnimationFrame(update);
        };
        requestAnimationFrame(update);
</script>
</body>
</html>